'use client'

import { useState } from 'react'
import GradientButton from '@/components/common/GradientButton'

export default function ReportsDashboard() {
  const [publicAccess, setPublicAccess] = useState({
    tapplock: true,
    igloohome: true,
    noke: false
  })

  return (
    <div className="upload-card w-full mx-auto p-[16px] text-gray-200 shadow-[0_0_20px_rgba(0,0,0,0.3)]">
      {/* Title */}
      <h2 className="text-[#9fb7ff] text-[14px] font-semibold tracking-wider mb-4">Reports</h2>

      {/* Search */}
      <div className="relative mb-6">
        <input
          type="text"
          placeholder="Search reports (company, file, tags)"
          className="w-full bg-[#1a1f2b] text-gray-300 text-[13px] px-4 py-2 rounded-md border-solid border-[#2b3142] focus:border-[#8b5cf6] focus:ring-1 focus:ring-[#8b5cf6] outline-none"
        />
      </div>

      {/* File List */}
      <div className="space-y-3 mb-8">
        {[
          {
            type: 'PDF',
            name: 'tapplock_series_a.pdf',
            size: '7.8 MB',
            status: 'Processing',
            color: 'border-[#8b5cf6]/40 bg-[#1a1f2b]'
          },
          {
            type: 'PPT',
            name: 'fum_pitch_deck_v3.pptx',
            size: '12.4 MB',
            status: 'Processed after email confirmation'
          },
          { type: 'PPT', name: 'fum_pitch_deck_v3.pptx', size: '12.4 MB', status: 'Queued' },
          { type: 'PPT', name: 'fum_pitch_deck_v3.pptx', size: '12.4 MB', status: 'Queued' },
          {
            type: 'PPT',
            name: 'fum_pitch_deck_v3.pptx',
            size: '12.4 MB',
            status: 'Queued for next month',
            div: 'Upgrade to process now'
          }
        ].map((file, i) => (
          <div
            key={i}
            className={`flex items-center justify-between bg-[#10141f] border-solid border-[#1f2533] rounded-xl px-4 py-3 hover:bg-[#141a28] transition`}>
            {/* 左侧 */}
            <div className="flex items-center gap-3">
              <span className="text-xs font-semibold bg-[#1a1f2b] text-gray-100 border border-[#2b3142] px-2 py-1 rounded-md">
                {file.type}
              </span>
              <div>
                <p className="text-sm font-medium">{file.name}</p>
                <p className="text-xs text-gray-500">{file.size} · Uploaded Oct 19, 2025</p>
              </div>
            </div>

            {/* 右侧状态 */}
            <div className="flex items-center gap-3">
              {file.div ? (
                <>
                  <p className="text-sm text-gray-400">{file.status}</p>
                  <GradientButton title={file.div} fontSize="13px" height="36px" radius="12px" onClick={() => {}} />
                </>
              ) : (
                <p className="text-sm text-gray-400">{file.status}</p>
              )}
              <div className="w-8 h-8 text-[14px] flex items-center justify-center border-solid border-[#2b3142] rounded-[12px] text-gray-400 cursor-pointer hover:border-[rgba(124,92,255,.5)] hover:text-white">
                ⚙️
              </div>
            </div>
          </div>
        ))}
      </div>

      {/* === Report Cards === */}
      <div className="space-y-6">
        {[
          {
            id: 'tapplock',
            name: 'Tapplock',
            tag: '🟡 Cautiously Optimistic',
            meta: 'Access Control / Security • Hardware + SaaS • Canada • Analyzed Oct 19, 2025',
            round: 'Seed/Bridge',
            amount: '$1M USD',
            valuation: 'N/A',
            recommendation: 'Proceed to Diligence',
            signal: 64,
            rationale: 'Anchor utility deployment could unlock category leadership; security/execution risks remain.',
            color: 'from-[#22c55e] to-[#16a34a]'
          },
          {
            id: 'igloohome',
            name: 'Igloohome',
            tag: '⚪ Neutral',
            meta: 'Smart Locks • Hardware + SaaS • APAC • Analyzed Oct 12, 2025',
            round: '—',
            amount: '—',
            valuation: '—',
            recommendation: 'Monitor',
            signal: 48,
            rationale:
              'Attractive market position for hospitality/SME; needs evidence of durable enterprise motion before diligence.',
            color: 'from-[#facc15] to-[#eab308]'
          },
          {
            id: 'noke',
            name: 'Noke',
            tag: '🔴 Unfavorable',
            meta: 'Smart Locks • Hardware + SaaS • APAC • Analyzed Oct 12, 2025',
            round: '—',
            amount: '—',
            valuation: '—',
            recommendation: 'Pass',
            signal: 78,
            rationale: 'Crowded segment and weaker differentiation; insufficient traction vs. scaled incumbents.',
            color: 'from-[#ef4444] to-[#b91c1c]'
          }
        ].map((r) => (
          <div
            key={r.id}
            className="bg-[#10141f] border-solid border-[#1f2533] rounded-2xl p-5 flex flex-col gap-4 shadow-[0_0_15px_rgba(0,0,0,0.25)]">
            {/* Header */}
            <div className="flex flex-col md:flex-row md:items-center justify-between">
              <div>
                <h3 className="text-lg font-semibold text-white">{r.name}</h3>
                <p className="text-sm text-gray-400">{r.meta}</p>
              </div>

              <GradientButton title="View report" fontSize="13px" height="36px" radius="12px" onClick={() => {}} />
            </div>

            {/* Tags */}
            <div className="flex flex-wrap gap-2">
              <span className="text-xs font-medium bg-[#1a1f2b] px-3 py-1 rounded-md text-gray-300">{r.tag}</span>
              <span className="text-xs bg-[#1a1f2b] px-3 py-1 rounded-md text-gray-400">Round: {r.round}</span>
              <span className="text-xs bg-[#1a1f2b] px-3 py-1 rounded-md text-gray-400">Amount: {r.amount}</span>
              <span className="text-xs bg-[#1a1f2b] px-3 py-1 rounded-md text-gray-400">Valuation: {r.valuation}</span>
            </div>

            {/* Recommendation */}
            <div>
              <p className="text-sm font-semibold text-gray-300 mb-2">Recommendation: {r.recommendation}</p>
              <div className="flex items-center gap-3">
                <div className="flex-1 h-2 bg-[#1a1f2b] rounded-full overflow-hidden">
                  <div
                    className={`h-full w-[${r.signal}%] bg-gradient-to-r ${r.color}`}
                    style={{ width: `${r.signal}%` }}
                  />
                </div>
                <span className="text-xs text-gray-400">SIGNAL STRENGTH {r.signal}%</span>
              </div>
            </div>

            {/* Rationale */}
            <div>
              <h4 className="text-xs font-semibold text-gray-500 uppercase tracking-wide mb-1">Rationale</h4>
              <p className="text-sm text-gray-400">{r.rationale}</p>
            </div>

            {/* Footer */}
            <div className="flex items-center justify-between pt-2 border-t border-[#1f2533]">
              <div className="flex items-center gap-3">
                <span className="text-sm text-gray-400">Public access:</span>
                {/* 简易替代版开关 */}
                <div
                  onClick={() => setPublicAccess((prev) => ({ ...prev, [r.id]: !prev[r.id] }))}
                  className={`relative w-10 h-5 rounded-full cursor-pointer transition ${
                    publicAccess[r.id] ? 'bg-[#38bdf8]' : 'bg-[#2b3142]'
                  }`}>
                  <div
                    className={`absolute top-[4px] left-[4px] w-3 h-3 rounded-full bg-white transition-transform duration-300 ${
                      publicAccess[r.id] ? 'translate-x-[20px]' : 'translate-x-0'
                    }`}></div>
                </div>
              </div>
              <div className="text-xs text-gray-400 border border-[#2b3142] rounded-md px-3 py-1 hover:bg-[#141a28] transition">
                Copy Shareable Link
              </div>
            </div>
          </div>
        ))}
      </div>
    </div>
  )
}
